import React, { useEffect, useState } from 'react'
import { Button, Table, Tag, Pagination, Modal, Form, Input, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import styles from './index.module.scss'
import { useAppDispatch } from '@/store'
import type { PaginationProps } from 'antd'
import { useNavigate } from 'react-router-dom'
import { getSubjectOne, postSubjectOne, updateSubjectOne } from '@/util/request'
const { confirm } = Modal


const PAGE_COUNT = 10

export type StudentCategoryType = {
  name: string,
  key: string,
  _id?: string
}
export default function StudentCategory () {
  const navigate = useNavigate()
  const [loading, setLoading] = useState(false)
  const [dataList, setDataList] = useState([])
  const [currentId, setCurrentId] = useState<any>('')
  const [title, setTitle] = useState('新增课程类别管理')
  const [componentDisabled, setComponentDisabled] = useState(false)
  const [form] = Form.useForm();
  const dispatch = useAppDispatch()

  const goUpdate = (item: StudentCategoryType) => {
    form.setFieldsValue({
      name: item.name,
      key: item.key
    });
    setCurrentId(item._id)
    setTitle('更新课程类别管理')
    setComponentDisabled(true)
    setLoading(true)
  }
  useEffect(() => {
    mountedData()
  }, [])

  const mountedData = () => {
    getSubjectOne().then(res => {
      setDataList(res)
    })
  }
  // 表格的每一列的数据
  const columns: ColumnsType<StudentCategoryType> = [
    {
      title: 'id',
      dataIndex: '_id',
      key: '_id'
    },
    {
      title: '课程编码',
      dataIndex: 'key',
      key: 'key'
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '操作',
      key: '_id',
      dataIndex: '_id',
      render: (text, record) => (
        <>
          <Button type="primary" onClick={() => goUpdate(record)}>
            更新
          </Button>
          {/* <Button danger type="primary" onClick={() => goDelect(record)}>
            删除
          </Button> */}

        </>
      )
    }
  ]

  const handleCancel = () => {
    setLoading(false)
    form.resetFields() 
  }
  // 点击新增按钮
  async function onFinish (values: any) {
    title === '新增课程类别管理' ? await postSubjectOne(values) : await updateSubjectOne({...values, _id: currentId})
    mountedData()
    message.success('成功')
    handleCancel()
  }

  return (
    <div>
      <Button type="primary" onClick={() => {
        setTitle('新增课程类别管理')
        setLoading(true)
        setComponentDisabled(false)
      }}>新增</Button>
      <div className={styles.table}>
        <Table columns={columns} dataSource={dataList} pagination={false} />
      </div>
      <Modal  title={title} open={loading} destroyOnClose onCancel={handleCancel} okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
      modalRender={(dom) => (
        <Form
          layout="vertical"
          form={form}
          initialValues={{ modifier: 'public' }}
          onFinish={(values) => onFinish(values)}
        >
          {dom}
        </Form>
      )}
      >
        <Form.Item
            label="课程编码"
            name="key"
    
            rules={[
              { required: true, message: '请输入key!' }
            ]}
          >
            <Input disabled={componentDisabled} />
          </Form.Item>
          <Form.Item
            label="名称"
            name="name"
            rules={[
              { required: true, message: '请输入名称!' }
            ]}
          >
            <Input />
          </Form.Item>
      </Modal>
    </div>
  )
}
